<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3鼠标经过圆形旋转特效</title>
<meta name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />

</head>
<body>

<div class="case-content">
	<h1 class="title">css3鼠标经过圆形旋转特效</h1>
	<div class="case-item">
		<div class="ih-item circle effect1">
			<a href="#">
				<div class="spinner"></div>
				<div class="img"><img src="images/1.jpg" alt="学习LOS" height=200 width=200></div>
				<div class="info">
					<div class="info-back">
						<h3>标题一</h3>
						<p>好好学习，天天向上</p>
					</div>
				</div>
			</a>
		</div>
	</div>
	
	<div class="case-item">
		<div class="ih-item circle effect1">
			<a href="#">
				<div class="spinner"></div>
				<div class="img"><img src="images/2.jpg" alt="学习" height=200 width=200></div>
				<div class="info">
					<div class="info-back">
						<h3>标题二</h3>
						<p>好好学习，天天向上</p>
					</div>
				</div>
			</a>
		</div>
	</div>
	
	<div class="case-item">
		<div class="ih-item circle effect1">
			<a href="#">
				<div class="spinner"></div>
				<div class="img"><img src="images/3.jpg" alt="学习" height=200 width=200></div>
				<div class="info">
					<div class="info-back">
						<h3>标题三</h3>
						<p>好好学习，天天向上</p>
					</div>
				</div>
			</a>
		</div>
	</div>
	
	<div class="case-item">
		<div class="ih-item circle effect1">
			<a href="#">
				<div class="spinner"></div>
				<div class="img"><img src="images/4.jpg" alt="学习" height=200 width=200></div>
				<div class="info">
					<div class="info-back">
						<h3>标题四</h3>
						<p>好好学习，天天向上</p>
					</div>
				</div>
			</a>
		</div>
	</div>
		
	
</div>
</body>
</html>